<script lang='ts' setup>
import { ThemeEnum } from '@/models/app.context';
import { appRef } from '@/models/app.ref';
import { onMounted } from 'vue';


defineProps<{ show?: boolean, collapsed?: boolean }>()

onMounted(() => {
  appRef.theme = localStorage.getItem('theme') as ThemeEnum || ThemeEnum.Light;
  changeTheme(appRef.theme);
})

/** 改变主题 */
function changeTheme(type = appRef.theme === ThemeEnum.Dark ? ThemeEnum.Light : ThemeEnum.Dark): void {
  type === ThemeEnum.Dark ? document.body.setAttribute('arco-theme', 'dark') : document.body.removeAttribute('arco-theme');
  appRef.theme = type;
  localStorage.setItem("theme", type)
}
</script>
<template>
  <div key="theme" v-if="show">
    <div class="flex" v-if="collapsed">
      <div class="box flex" :class="{ active: appRef.theme === ThemeEnum.Dark }" @click="changeTheme()">
        <icon-moon-fill size="24" /> <span> 暗黑 </span>
      </div>
      <div class="box flex" :class="{ active: appRef.theme === ThemeEnum.Light }" @click="changeTheme()">
        <icon-sun-fill size="24" />  <span> 明亮 </span>
      </div>
    </div>
    <div class="box box-collapsed" v-else @click="changeTheme()">
      <icon-sun-fill size="24" v-if="appRef.theme === ThemeEnum.Light" />
      <icon-moon-fill size="24" v-else />
    </div>
  </div>
</template>
<style lang='scss' scoped>
.box {
  width: 100%;
  padding: .25rem;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  padding: 1rem;
  color: var(--color-neutral-4);
  justify-content: center;
  span {
    margin-left: 6px;
  }
}

.active {
  background: var(--color-neutral-3);
  color: var(--color-neutral-8);
}

.box-collapsed {
  color: var(--color-neutral-8);
}
</style>